<template>
  <div class="shotbox">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-menu
          router
          default-active="/user/userInfo"
          class="el-menu-vertical-demo">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user/userInfo">资料修改</el-menu-item>
              <el-menu-item v-if="this.user.roleKey == 'duiwu'" index="/user/certification">认证信息</el-menu-item>
              <el-menu-item v-if="this.user.roleKey == 'duiwu'" index="/user/athlete">运动员管理</el-menu-item>
              <el-menu-item v-if="this.user.roleKey == 'jiazhang'" index="/user/athletejiazhang">运动员管理</el-menu-item>
              <el-menu-item v-if="this.user.roleKey == 'duiwu'" index="/user/referee">随队裁判管理</el-menu-item>
              <el-menu-item v-if="this.user.roleKey == 'duiwu'" index="/user/coach">教练管理</el-menu-item>
              <el-menu-item v-if="this.user.roleKey == 'duiwu'" index="/user/teamleader">领队管理</el-menu-item>
              <el-menu-item v-if="this.user.roleKey == 'duiwu'" index="/user/teamother">随队人员管理</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group v-if="this.user.roleKey == 'duiwu'" title="比赛">
              <el-menu-item index="/user/competition">比赛报名</el-menu-item>
              <!-- <el-menu-item index="/user/test">测试</el-menu-item> -->
              <el-menu-item index="/user/projectlist">比赛列表</el-menu-item>
              <!-- <el-menu-item index="/user/training">培训报名</el-menu-item>
              <el-menu-item index="/user/traininglist">培训列表</el-menu-item> -->
            </el-menu-item-group>
            <el-menu-item-group title="培训">
              <el-menu-item index="/user/training">培训报名</el-menu-item>
              <el-menu-item index="/user/traininglist">培训列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  components:{
  },
  data () {
    return {
      isCollapse:true,
    }
  },
  computed:{
    ...mapState({
      user:state => state.user.userInfo
    })
  }
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}
.el-submenu .el-menu-item {
    height: 50px;
    line-height: 50px;
    padding: 0 45px;
    min-width: 180px;
}

</style>